<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>课程名称动态显示-课程播放</title>
    <meta name="keywords" content="枣课网">
    <meta name="description" content="枣课网、枣课教育">
    <link rel="stylesheet" href="__STATIC__/css/qx_index.css">
    <link rel="stylesheet" href="__STATIC__/css/qct-all.css">
    <link rel="stylesheet" href="__STATIC__/bootstrap-5.1.3/css/bootstrap.css">
    <script src="__STATIC__/js/jquery-1.11.3.min.js"></script>

    <link href="__STATIC__/tencent/tcplayer.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="__STATIC__/tencent/ie8/videojs-ie8.js"></script>
    <![endif]-->
    <script src="__STATIC__/tencent/libs/hls.min.0.13.2m.js"></script>
    <script src="__STATIC__/tencent/tcplayer.v4.3.0.min.js"></script>
    <style>
        body{
            color:white;
        }
        a{
            color:white;
        }
        a:hover{
            color:#c0c0c0;
        }
        #qct_player{
            width:950px;
            height:100%;
        }
        /* 设置滚动条的样式 */
        ::-webkit-scrollbar {
            width:12px;
        }
        /* 滚动槽 */
        ::-webkit-scrollbar-track {
            -webkit-box-shadow:inset 0 0 5px rgba(250,250,250,0.2);
            border-radius:10px;
        }
        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            border-radius:10px;
            background:rgba(76,76,76,0.1);
            -webkit-box-shadow:inset 0 0 5px rgba(76,76,76,0.5);
        }
        ::-webkit-scrollbar-thumb:window-inactive {
            background:rgba(255,0,0,0.4);
        }
    </style>
</head>
<body style="background-color:#1b1b1b;">
<div class="container">
    <div class="row">
        <div class="col-9 py-1">
            <nav style="--bs-breadcrumb-divider: '>';margin-top:10px;" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#" class="path-style">首页</a></li>
                    <li class="breadcrumb-item"><a href="#" class="path-style">Java工程师</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Java工程师</li>
                </ol>
            </nav>
        </div>
        <div class="col-3">

        </div>
    </div>
    <div class="row">
        <div class="col-lg-9" style="height:600px;">
            <!--视频播放器-->
            <video id="qct_player" preload="auto" class="player-size" playsinline webkit-playsinline x5-playsinline></video>
        </div>
        <div class="col-lg-3 py-lg-3" style="background-color:#000;overflow-y: scroll;height: 600px;">
            <!--课程播放列表-->
            <div class="model1">
                <input type="hidden" id="video_id" value="{$video_id}"> <!--视频编号-->
                <div class="mk1" style="font-size:12px;">
                    {volist name="category.catalogs" id="catelogs"}
                    <div {if condition="$catelogs.grade=='1'"}style="display:black"{/if} {if condition="$catelogs.grade=='0'"} onclick="changelist({$catelogs.cLogId})"{/if} class="videolist{$catelogs.pid}">
                    {if condition="$catelogs.grade=='0'"}
                    <p class="model-title">{$catelogs.title}</p>
                    {else /}
                    <div class="model-header" id="{$catelogs.cLogId}" style="padding-left:15px;padding-bottom:8px;">
                        <a href="javascript:void(0)">
                            <input type="hidden" value="{$catelogs.pid}">
                            <div class="textbox clear">
                                <div class="left box-left" onClick="next_video('{$catelogs.cLogId}')" style="width:100%">
                                    <div id="video_{$catelogs.cLogId}">{$catelogs.title} <span id="avideo_{$catelogs.cLogId}"></span></div>
                                </div>
                                <div style="clear:both;"></div>
                                <div class="right box-right" style="font-size:0.2rem;width:170px;margin-top:10px;display:none;">
								<span {if $catelogs.time=='已学习100%'} style="color:white;"{elseif $catelogs.time=='未开始'/}
                                      style="color: #232323;float:right;"{else /} style="color:white;float:right;"{/if}>{$catelogs.time}</span>
                                    <a target="_blank" onClick="class_test({$catelogs.cLogId},{$catelogs.play_persent},'{:url('h5/sduty/examination',['id'=>$catelogs.cLogId])}')" style="color:white;float:right;width:90px;"  href="javascript:void(0)">随堂小测</a>
                                </div>
                            </div>
                        </a></div>
                    {/if}
                </div>
                {/volist}
            </div>
            <!---->
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        // 目录导航
        $('.study2-nav-lists ul li').click(function(){
            var index=$(this).index();
            $(this).addClass('list-sty').siblings('li').removeClass('list-sty');
            $('.model-mk .model1').eq(index).show().siblings('.model1').hide()
        });
        var video_id = $('#video_id').val();
        if(video_id){
            $('#video_'+video_id).css('background-color','#1b1b1b');
            $('#avideo_'+video_id).html("<img align='absmiddle' height='15' src='__STATIC__/images/play_ico.gif' >");
        }
    });

    // 实例化播放器
    var player = TCPlayer("qct_player", {
        fileID: "387702291721398311", // 387702292122781625
        appID: "1500008102",
        psign: "{$sign}",
    });
    // 387702292122781625
    // 387702293981771212
    // 0、播放器初始化完成
    player.ready(function(){
        console.log('播放器初始化完成!');
    });

    // 1、视频加载中触发
    player.on('loadstart', function(){
        console.log('视频加载中.');
    });

    // 2、视频资源获取到触发（反复执行）
    player.on('progress', function(){
        console.log('视频资源已获取到.');
    });

    // 3、视频可以播放了
    player.on('canplay', function(){
        console.log('视频可以播放了.');
    });

    // 4、点击播放触发
    player.on('play', function () {
        console.log('点击了播放');
    });

    // 5、视频恢复播放（暂停到恢复播放）
    player.on('playing', function(){
        stopTimer();
        update_jd($("#video_id").val());
        console.log('视频恢复播放.');
    });

    // 6、视频暂停触发
    player.on('pause', function(){
        stopTimer();
        console.log('视频暂停！');
    });

    // 7、播放完毕触发
    player.on('ended', function(){
        player_over();
        console.log('视频播放完毕.');
    });

    // 8、播放错误触发
    player.on('error', function(){
        console.log('视频播放错误！请刷新再试！');
    });

    /**
     *  点击章节触发
     */
    function next_video (video_id){
        // 更新隐藏域的值为当前播放的视频主键
        $("#video_id").val(video_id);
        // 每次点击触发初始化播放器，获取签名
        $.post("{:url('api/api_sdk/getsign')}",{video_id:video_id},function(data){
            if(data.code == 1) {
                console.log('切换播放文件成功');
                //console.log(data);
                player.loadVideoByID({fileID: data.fileid, appID: data.appid, psign: data.sign});
                record_video_time(video_id);
                update_jd(video_id);
            }
            else {
                console.log('发生错误,服务器无法返回正确的播放器参数!');
                alert('发生错误!');
            }
        });
    }

    /**
     * 创建播放记录
     */
    function record_video_time (vid) {
        $.ajax({
            type:'POST',
            url:"{:url('/play_start')}",
            dataType:'json',
            data:{'id':vid},
            success:function (data) {
                console.log('创建'+vid+'记录成功');
            },
            error:function (data) {
                console.log('创建'+vid+'记录失败');
            }
        })
    }

    /**
     * 每隔30秒更新一下播放进度
     */
    var Timer = null;
    function update_jd(pro_id){
        stopTimer();
        Timer = window.setInterval(function(){
            // 获取当前播放的时间点
            var sec=player.currentTime();
            console.log('时间轴已到:'+sec+'秒,更新的编号:'+pro_id);
            if(sec>0){
                $.ajax({
                    type:'POST',
                    url:"{:url('/play_unload')}",
                    dataType:'json',
                    data:{
                        'id':pro_id,
                        'time':sec
                    },
                    success:function (data) {
                        console.log('更新播放进度成功');
                        //console.log(data);
                    },
                    error:function(){
                        console.log('更新播放进度失败');
                        //console.log(data);
                    }
                })
            }
            else{console.log('还未开始,请点击播放按钮');}
        },30000, pro_id);
    }
    function stopTimer(){
        window.clearInterval(Timer);
    }

    /**
     * 播放完毕
     */
    function player_over() {
        $.ajax({
            type:'POST',
            url:"{:url('/play_complate')}",
            dataType:'json',
            data:{
                'id':$('#video_id').val(),
            },
            success:function (data) {
                console.log('播放完毕更新了数据');
            }
        })
    }

    //合上展开视频列表
    function changelist(id){
        var is_show = $('.videolist'+id).eq(0).css('display');
        if(is_show == 'none'){
            $('.videolist'+id).show();
        }else{
            $('.videolist'+id).hide();
        }
    }

    //随堂小测
    function class_test(id,persent,url)
    {
        if (persent < 90) {
            alert('该课程您未学习到90%,暂不可答题');
        } else {
            $.post("{:url('exam/video/search_examination')}",{id:id},function(res){
                if(res.code == 1){

                    location.href = url;
                }else{
                    alert(res.msg);
                }
            });
        }
    }
</script>
</body>
</html>